<template>
  <div>
    <el-tabs v-model="activeTab" @tab-change="fetchData">
      <el-tab-pane label="未审核" name="pending"></el-tab-pane>
      <el-tab-pane label="已审核" name="approved"></el-tab-pane>
    </el-tabs>

    <el-table :data="identityList" border style="width: 100%">
      <el-table-column prop="applyDate" label="申请日期" width="120" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="phone" label="电话" width="120" />
      <el-table-column prop="realName" label="真实姓名" width="120" />
      <el-table-column prop="documentType" label="证件类型" width="120" />
      <el-table-column prop="documentNumber" label="证件号" width="180" />
      <el-table-column label="身份证正面" width="120">
        <template #default="scope">
          <img
            :src="scope.row.frontImagePath"
            alt="身份证正面"
            style="width: 60px; height: auto; cursor: pointer"
            @click="openImageDialog(scope.row.frontImagePath)"
          />
        </template>
      </el-table-column>
      <el-table-column label="身份证背面" width="120">
        <template #default="scope">
          <img
            :src="scope.row.backImagePath"
            alt="身份证背面"
            style="width: 60px; height: auto; cursor: pointer"
            @click="openImageDialog(scope.row.backImagePath)"
          />
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="120">
        <template #default="scope">
          <span>{{ scope.row.status || "未审核" }}</span>
        </template>
      </el-table-column>

      <!-- 新增一列显示不通过的原因 -->
      <el-table-column label="不通过原因" width="180">
        <template #default="scope">
          <span>{{ scope.row.rejectionReason || "无" }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="scope">
          <!-- 未审核状态下显示通过和不通过按钮 -->
          <el-button
            v-if="activeTab === 'pending'"
            type="success"
            @click="approveIdentity(scope.row.userId)"
          >
            通过
          </el-button>
          <el-button
            v-if="activeTab === 'pending'"
            type="danger"
            @click="showRejectDialog(scope.row.userId)"
          >
            不通过
          </el-button>

          <!-- 在已审核状态下，判断status显示不同按钮 -->
          <el-button
            v-if="activeTab === 'approved' && scope.row.status === '通过'"
            type="danger"
            @click="showRejectDialog(scope.row.userId)"
          >
            不通过
          </el-button>
          <el-button
            v-if="activeTab === 'approved' && scope.row.status === '未通过'"
            type="success"
            @click="approveIdentity(scope.row.userId)"
          >
            重新通过
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 放大图片的弹出框 -->
    <el-dialog v-model="dialogVisible" width="60%" :before-close="handleClose">
      <img
        :src="selectedImage"
        alt="放大图片"
        style="width: 100%; height: auto"
      />
    </el-dialog>

    <!-- 拒绝审核原因输入框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="输入拒绝原因"
      :before-close="handleRejectDialogClose"
    >
      <el-input
        type="textarea"
        v-model="rejectionReason"
        placeholder="请输入拒绝的原因"
        rows="4"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRejectionReason"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPendingIdentities,
  getApprovedIdentities,
  approveIdentities,
  rejectIdentities,
} from "@/api/audit"; // 假设API路径为 /api/identity.js

export default {
  name: "IdentityVerification",
  data() {
    return {
      activeTab: "pending", // 默认选中未审核
      identityList: [],
      dialogVisible: false, // 控制放大图片的弹出框显示
      selectedImage: "", // 存储选中的图片地址
      rejectDialogVisible: false, // 控制拒绝原因输入框的弹窗显示
      rejectionReason: "", // 存储拒绝原因
      currentUserId: null, // 存储当前操作的用户ID
    };
  },
  methods: {
    // 根据tab加载数据
    fetchData() {
      if (this.activeTab === "pending") {
        getPendingIdentities().then((response) => {
          this.identityList = response.data
            ? this.formatData(response.data)
            : [];
        });
      } else {
        getApprovedIdentities().then((response) => {
          this.identityList = response.data
            ? this.formatData(response.data)
            : [];
        });
      }
    },

    // 数据格式化函数
    formatData(data) {
      return data.map((item) => ({
        applyDate: new Date(item.userIdentity.CreatedAt).toLocaleString(),
        userId: item.userIdentity.userId,
        username: item.user.username || "未知",
        phone: item.user.phone || "暂无电话",
        realName: item.userIdentity.realName,
        documentType: item.userIdentity.documentType,
        documentNumber: item.userIdentity.documentNumber,
        frontImagePath:
          import.meta.env.VITE_BASE_API + item.userIdentity.frontImagePath,
        backImagePath:
          import.meta.env.VITE_BASE_API + item.userIdentity.backImagePath,
        status: item.userIdentity.isApproved == 1 ? "通过" : "未通过", // 审核状态
        rejectionReason: item.userIdentity.rejectionReason || "",
      }));
    },

    // 放大图片的弹窗
    openImageDialog(imageUrl) {
      this.selectedImage = imageUrl;
      this.dialogVisible = true;
    },

    // 关闭放大图片弹窗
    handleClose() {
      this.dialogVisible = false;
    },

    // 打开拒绝原因输入框弹窗
    showRejectDialog(userId) {
      this.currentUserId = userId;
      this.rejectDialogVisible = true;
    },

    // 关闭拒绝原因输入框弹窗
    handleRejectDialogClose() {
      this.rejectionReason = ""; // 清空输入框
    },

    // 提交拒绝原因
    submitRejectionReason() {
      if (!this.rejectionReason) {
        this.$message.error("请填写拒绝原因");
        return;
      }
      rejectIdentities({
        userId: this.currentUserId,
        rejectionReason: this.rejectionReason,
      }).then(() => {
        this.fetchData();
        this.rejectDialogVisible = false; // 关闭弹窗
        this.$message.error("已驳回审核");
      });
    },

    // 审核通过
    approveIdentity(userId) {
      approveIdentities({ userId }).then(() => {
        this.fetchData();
        this.$message.success("已通过审核");
      });
    },

    // 审核不通过
    rejectIdentity(userId) {
      rejectIdentities({ userId }).then(() => {
        this.fetchData();
        this.$message.error("已驳回审核");
      });
    },
  },
  mounted() {
    this.fetchData(); // 页面加载时获取初始数据
  },
};
</script>

<style scoped>
/* 样式定义 */
</style>
